<template>
    <div class="ClosingAccountFirstInstance topStyley">
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类-->销户申请初审</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <!-- <div class="tab-header">
                    <div class="headerTitles text_center">销户申请</div>
                </div>-->
                <div>
                    <el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
                        <el-row>
                            <!-- <el-col :span="8">
                                <div class="text_center width30">
                                    <el-form-item label="账户类别:" class="text_fl">
                                        <span class="el-form-item-span">{{isCATEGORY}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>-->
                            <el-col :span="8">
                                <div class="text_center width30">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CARDNO}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="text_center">
                                    <el-button type="primary" size="small" @click="urgeSure">销户挽留</el-button>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="text_center">
                                    <el-button type="primary" size="small" @click="pageJump">销户申请</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="销户挽留"
                        :visible.sync="centerDialogUrgeVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <!-- <p>
                            卡产品：
                            <span>{{this.PRODUCT_value}}</span>
                        </p>-->
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要取消销户，保存挽留记录吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogUrgeVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="urgeForm"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                    <el-dialog
                        v-drag
                        title="销户申请"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <!-- <p>
                            卡产品：
                            <span>{{this.PRODUCT_value}}</span>
                        </p>-->
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要销户吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="submitForm"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <h1>挽留原因：</h1>
                <div class="content table_eltabs">
                    <el-table
                        :data="urgeList"
                        style="width: 100%"
                        border
                        height="200px"
                        class="table_head heard-bg setbottomborder"
                        :stripe="true"
                    >
                        <el-table-column label="编号" min-width="20">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column label="类型" min-width="80">
                            <template slot-scope="scope">{{ scope.row.type }}</template>
                        </el-table-column>
                        <el-table-column label="详情" min-width="180">
                            <template slot-scope="scope">{{ scope.row.desc }}</template>
                        </el-table-column>
                    </el-table>
                </div>
                <h1>不可销户原因：</h1>
                <div class="content table_eltabs">
                    <el-table
                        :data="applyList"
                        style="width: 100%"
                        border
                        height="200px"
                        class="table_head heard-bg setbottomborder"
                        :stripe="true"
                    >
                        <el-table-column label="编号" min-width="20">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column label="类型" min-width="80">
                            <template slot-scope="scope">{{ scope.row.type }}</template>
                        </el-table-column>
                        <el-table-column label="详情" min-width="180">
                            <template slot-scope="scope">{{ scope.row.desc }}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import {
    trimString, closePage, getDictMappingValue, itoStr, updateDeal3004, updateDeal3601, checkUrgeRules, checkApplyRules,
} from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'ClosingAccountFirstInstance',
    data() {
        return {
            formData: {
                CATEGORY: '', // 账户类别
                CARDNO: '', // 卡号
                IDTYPE: '', // //证件种类
                CUSTID: '', // 证件号码
                AUTOFLAG: '0', // 溢缴款自动结清申请
                CLSFLAG: '1', // 销户标志
                BANKFLAG: '0', // 销户自动结清转账行标志
            },
            rules: {
                BEGDATE: [{ required: true, message: '请选择菜单类型' }],
            },
            defaultParams: this.$store.getters.defaultParams || '', // 更新报文
            ClosingAccountFirstInstanceInfo: {}, // 销卡成功返回回来的数据
            isCATEGORY: '',
            centerDialogVisible: false,
            centerDialogUrgeVisible: false,
            PRODUCT_value: '',
            productId: '',
            urgeList: [],
            applyList: [],
            BALANCE_value: '',//ic  3096的BALANCE 值
        };
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'pinFlag',
            'cardList_3601',
            'cardAccountInfo_3001',
            'userInfo',
        ]),
    },

    filters: {
        isCancltm: (value) => {
            let s = '';
            if (value && trimString(`${value}`) != '') {
                const t = value.toString();
                s = `${t.substr(0, 2)}:${t.substr(2, 2)}:${t.substr(4, 2)}`;
            }
            return `${moment().format('YYYY-MM-DD')}  ${s}`;
        },
    },
    async mounted() {
        this.formData.CATEGORY = this.cardInfo_3004.CATEGORY;
        this.formData.CARDNO = this.cardInfo_3004.CARDNO;
        this.formData.IDTYPE = this.cardInfo_3004.KEYTYPE;
        this.formData.CUSTID = this.cardInfo_3004.CUSTID;
        this.getDictValue();
        await this.setICCardInfo(); //获取芯片卡可用余额
        this.checkUrgeRules(); //查询挽留原因
        this.checkApplyRules(); //查询不可销户原因

    },
    methods: {
        // 账户类型 字典取值
        async getDictValue() {
            this.isCATEGORY = await getDictMappingValue('CATE', this.formData.CATEGORY, this);
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
        },

        //
        urgeSure() {
            this.centerDialogUrgeVisible = true;
        },
        handelSure() {
            this.centerDialogVisible = true;
        },

        // 3096IC卡交易明细查询
        async setICCardInfo() {
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            let params = {
                OPTION: 'A',
                CARDNBR: this.cardInfo_3004.CARDNO, // 卡号
                TRANTYPE: 'A', // 分期类型
                OPERCODE: '0',//操作代码，0-全部返回，1-可提前还款的分期交易，2-可撤销的分期交易
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                STDATE: moment().subtract(1, 'year').format('YYYYMMDD'), // 开始日期 默认为当前日期往前一个月, // 起始日期 YYYYMMDD
                ENDDTE: moment().format('YYYYMMDD'), // 终止日期
                RTNIND: '', // 翻页标志 首次传空， 翻页传1
                CENDT: '', // 首次查询时送空， 下翻页查询时上送上次查询结果的最后一条记录返回的交易传输时间
                TRCNBR: '', // 首次查询时送空， 下翻页查询时上送上次查询结果的最后一条记录返回的系统跟踪号
                ACQNO: '',// 首次查询时送空， 下翻页查询时上送上次查询结果的最后一条记录返回的代理机构标识码
                FORNO: '',// 首次查询时送空， 下翻页查询时上送上次查询结果的最后一条记录返回的发送机构标识码
                TXNDATE: '',// 首次查询时送空， 下翻页查询时上送上次查询结果的最后一条记录返回的交易日期
                OPDATE: '',// 首次查询时送空， 下翻页查询时上送上次查询结果的最后一条记录返回的登记日期
                OPTIME: '',// 首次查询时送空， 下翻页查询时上
            };
            defaultParams.body.appBody = Object.assign(this.defaultParams.body.appBody, params);
            defaultParams.body.appHead.tranCode = '3096';// 修改交易号
            console.log('=============setICCardInfo-3096-defaultParams:', defaultParams);
            await this.$post.common.transPort(defaultParams).then((res) => {
                console.log('=============setICCardInfo-3096-res:', res);
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        // 取芯片卡可用余额
                        this.BALANCE_value = cardlossofs.body.appBody.BALANCE || '0';

                    } else {
                        // const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        // this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, { customClass: 'error', type: 'error' });
                        this.BALANCE_value = '0';
                    }
                }
            });
        },

        // 挽留成功提交
        urgeForm() {
            // 参数：cardNo-卡号，opt-操作人
            var checkParam = {
                'cardNo': this.formData.CARDNO,
                'wlFlag': '1',
                'wlReason': '挽留成功',
                'createUser': this.userInfo.userAccount,
                'busiType': '1', //业务类型，1-销户，2-销卡
            };
            this.$post.queryServiceClass.closeAcctRecord(checkParam).then((res) => {
                console.log('===========urgeForm:', res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        const successMessage = `卡号：${this.formData.CARDNO} 挽留成功！`;
                        const ts = `挽留成功提示`;
                        this.$alert(successMessage, ts, {
                            customClass: 'success', type: 'success',
                        });
                    } else {
                        const ErrorMessage = `错误码：${res.data.status} ` + `错误信息：${res.data.msg}`;
                        this.$alert(ErrorMessage, '挽留失败提示', {
                            customClass: 'error', type: 'error',
                        });
                    }

                    this.centerDialogUrgeVisible = false;
                }
            });
        },
        // 4011信用卡销户 销卡交易
        submitForm() {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4011';// 

            defaultParam.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                CARDNBR: this.formData.CARDNO,
                IDTYPE: this.formData.IDTYPE,// 证件种类
                CUSTID: this.formData.CUSTID,// 证件号码，
                CLSFLAG: this.formData.CLSFLAG,// //销户标志
                AUTOFLAG: this.formData.AUTOFLAG, // //溢缴款自动结清申请
                CLSFLAG: this.formData.CLSFLAG, // 销户标志
                BANKFLAG: this.formData.BANKFLAG, // 销户自动结清转账行标志
            }
            this.$post.common.transPort(defaultParam).then((res) => {
                console.log('===========submitForm-4011-res:', res);
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        this.ClosingAccountFirstInstanceInfo = cardlossofs.body.appBody;
                        // this.isShowSuccess=true;
                        updateDeal3004(this.cardInfo_3004.CARDNO, this);
                        updateDeal3601(this.cardInfo_3004.CARDNO, this.cardInfo_3004.KEYTYPE, this.cardInfo_3004.CUSTID, this);
                        const successMessage = `姓名:${(`${this.ClosingAccountFirstInstanceInfo.NAME}`).trim()} 卡号：${this.ClosingAccountFirstInstanceInfo.CARDNBR} 销卡成功！`;
                        const ts = `${cardlossofs.sysHead.busiName}提示`;
                        this.$alert(successMessage, ts, {
                            customClass: 'success', type: 'success',
                            callback: (action) => {
                                this.handleClose();
                            },
                        });
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                    this.centerDialogVisible = false;
                }
            });
        },
        // 关闭页面
        handleClose() {
            closePage(this.$route, this, 1);
        },
        // 跳转到销户提交页面
        pageJump() {
            this.$router.push({
                path: '/operationDeals/ClosingAccountSubmit',
            });
        },
        // 查询挽留原因
        async checkUrgeRules() {
            // 参数：jsonRes_3001，jsonRes_3601
            var checkParam = {
                'jsonRes_3001': this.cardAccountInfo_3001,
                'jsonRes_3601': this.cardList_3601,
                'ecashBalance': this.BALANCE_value,
            };
            console.info("============checkUrgeRules-checkParam:", checkParam);

            this.urgeList = await checkUrgeRules(checkParam, this);
        },
        // 查询不可销户原因
        async checkApplyRules() {
            // 参数：jsonRes_3001，jsonRes_3601
            var checkParam = {
                'jsonRes_3001': this.cardAccountInfo_3001,
                'jsonRes_3601': this.cardList_3601,
            };
            console.info('==========checkApplyRules:', checkParam);

            this.applyList = await checkApplyRules(checkParam, this);
        },
    },
};
</script>

<style lang='scss' >
.ClosingAccountFirstInstance {
    /* .el-form-item-span {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
        display: inline-block;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        padding: 0 15px;
    } */
    .el-card__header {
        padding: 14px !important;
    }

    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
